<template>
  <div>
    <!-- 匿名插槽 -->
    <niming>11</niming>
    <hr>

    <!-- 具名插槽 -->
    <juming>
      <template slot="slot1">
        <div>这是蓝色</div>
      </template>
      <template slot="slot2">
        <div>这是绿色</div>
      </template>
    </juming>
    <hr>

    <!-- 作用域插槽1 -->
    <zyy1 :list="list">
      <template slot-scope="scope">
        {{ scope.$index }} - {{ scope.itemName.name }}
      </template>
    </zyy1>
    <hr>

    <!-- 作用域插槽2 -->
    <zyy2 :user-info="userInfo">
      <template slot-scope="scope">
        {{ scope.info }}
      </template>
    </zyy2>
    <hr>

  </div>
</template>
<script>
import niming from '/src/views/slot/slot1'
import juming from '/src/views/slot/slot2'
import zyy1 from '/src/views/slot/slot3'
import zyy2 from '/src/views/slot/slot4'
export default {
  name: 'SlotN',
  components: {
    niming,
    juming,
    zyy1,
    zyy2
  },
  data() {
    return {
      list: [
        { name: '一' },
        { name: '二' }
      ],
      userInfo: {
        sex: '男',
        age: 18
      }
    }
  },
  methods: {}
}
</script>
